<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试 -了解websockt</title>
  </head>
  <body>
    <button>点我给服务器发消息</button>
    <script>
      // ws: 通信协议
      // 跟http区别:  http单向  ws: 双向
      // 单向:  只能由客户端发起, 服务端只能响应请求,  不能主动发消息

      // ws是长连接, 连接上默认不主动断开的,  http是短连接, 连接上就断开了

      // ws使用场景:
      // 1. 聊天室
      // 2. 股票(金融交易)

      // 1. 建立一个webSocket
      let ws = new WebSocket('ws://124.222.224.186:8800/')


      // 监听链接成功
      ws.onopen = (xxx) => {
        console.log('连接服务器成功  ----->  ')
      }

      // 获取dom元素button
      let btn = document.querySelector('button')
      // 监听btn的点击事件
      btn.onclick = () => {
        // 3. 给服务器发送消息
        ws.send('hello')
      }

      // 4. 监听服务器返回的消息
      ws.onmessage = (res) => {
        console.log(res.data)
      }
    </script>
  </body>
</html>
